/*
 * @description: console system common stylesheet
 * @version: 0.1
 */
 @import "compass/css3";
 @import "common/css/common.scss";
 @import "/index/images/icon/*.png";
 @import "/index/images/lib/*.png";

 $icons: sprite-map("/index/images/icon/*.png",$spacing:12px);
 $lib-icons: sprite-map("/index/images/lib/*.png",$spacing:5px);
 .container{
    width: 100%;
 }
/* dome system icon */
// document
.icon-doc{
    @include get-sprite($icons,doc,true);
}
.icon-add{
    @include get-sprite($icons,add,true);
}
.icon-add-white{
    @include get-sprite($icons,add-white,true);
}
.icon-add-green{
    @include get-sprite($icons,add-green,true);
}
.icon-github,.icon-gitlab,.icon-centos,.icon-ubuntu{
    margin-right: 6px;
}
.icon-github{
    @include get-sprite($icons,github,true);
}
.icon-gitlab{
    @include get-sprite($icons,gitlab,true);
}
.icon-centos{
    @include get-sprite($lib-icons,centos,true);
}
.icon-ubuntu{
    @include get-sprite($lib-icons,ubuntu,true);
}
.icon-search{
    @include get-sprite($icons,search,true);
    margin-right: 6px;
}
.icon-edit{
    @include get-sprite($icons,edit,true);
}
.icon-down{
    @include get-sprite($icons,down,true);
}
.icon-down-white{
    @include get-sprite($icons,down-white,true);
}
.icon-down,.icon-down-white{
    &.up{
        @include rotate(-90deg);
    }
    &.top{
        margin-left: 8px;
        @include rotate(180deg);
    }
}
.icon-down-round{
    @include get-sprite($icons,down-round,true);
}
.icon-delete{
    @include get-sprite($icons,delete,true);
}
.icon-delete-disable{
    @include get-sprite($icons,delete-disable,true);
}
.icon-cancel{
    @include get-sprite($icons,cancel,true);
    margin-left: 4px;
}
.icon-check{
    @include get-sprite($icons,check,true);
}
.icon-last,.icon-next,.icon-down-double{
    @include get-sprite($icons,last,true);
    width: 14px;
    height: 16px;
    @include sprite-background-position($icons, last ,2px,3px);
}
.icon-next{
    @include sprite-background-position($icons, next ,2px,3px);
}
.icon-down-double{
    @include rotate(-90deg);
    &.up{
        @include rotate(90deg);
    }
}
.icon-label{
    @include get-sprite($icons,label,true);
    margin-right: 4px;
}
.icon-help{
    @include get-sprite($icons,help,true);
    &:hover{
        @include sprite-background-position($icons, help-hover);
    }
}
.icon-user{
    @include get-sprite($icons,user,true);
    margin-right: 4px;
}
.icon-cpu{
    @include get-sprite($icons,cpu,true);
    margin-right: 4px;
}
.icon-memory{
    @include get-sprite($icons,memory,true);
    margin-left: 4px;
}
.icon-order{
    @include get-sprite($icons,order,true);
    margin-left: 4px;
}
.icon-fresh{
    @include get-sprite($icons,fresh,true);
    margin-right: 4px;
    &:hover{
        @include sprite-background-position($icons, fresh-hover)
    }
}
.icon-copy{
    @include get-sprite($icons,copy,true);
    margin-right: 4px;
    &:hover{
        @include sprite-background-position($icons, copy-hover)
    }
}
.icon-tool{
    @include get-sprite($icons,tool,true);
}
.icon-config{
    @include get-sprite($icons,config,true);
    margin-right: 4px;
}
.icon-alarm{
    @include get-sprite($icons,alarm,true);
    margin-right: 4px;
}
/* dome system icon end*/

/* common style */

// search input
.ui-input{
    display: inline-block;
    height: 34px;
    padding: 6px 10px 6px 6px;
    line-height: 20px;
    vertical-align: middle;
}
.ui-input-search,.ui-input-search-white{
    width: 274px;
    background-origin:padding-box;
}
.ui-input-search{
    padding-left: 38px;
    @include get-sprite($icons,search,false);
    @include sprite-background-position($icons, search ,10px,7px);
}
.ui-input-search-white{
    padding-left: 20px;
    padding-bottom: 4px;
    @include get-sprite($icons,search,false);
    @include sprite-background-position($icons, search ,0,4px);
    border:none;
}
.ui-input-full{
    width: 100%;
}

.ui-label{
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 4px ;
    background-color: dome-color(background,light);
    border-radius: $default-radius;
    &:last-child{
        margin-right: 0;
    }
}
/* text style */
.txt-safe{
    color: dome-color(dome,safe);
}
.txt-warning{
    color: dome-color(dome,warning);
}
.txt-success{
    color: dome-color(dome,active);
}
.txt-normal{
    color: dome-color(dome,primary);
}
.txt-embed{
    color: dome-color(font,embed);
}
.txt-prompt{
    color: dome-color(font,prompt);
}
.txt-primary{
    color: dome-color(dome,primary);
}
.txt-bright{
    color: dome-color(dome,bright);
}
.txt-circle{
    display: inline-block;
    margin-left: 10px;
    padding: 0 14px 0 14px;
    line-height: 34px;
    font-style: normal;
    background-color: dome-color(background,light);
    border-radius: 22px;
    &.active{
        background-color: dome-color(background,primary);
    }
}
/* text style end*/

.font-size-16{
    font-size: 16px;
}
.font-size-18{
    font-size: 18px;
}
.tool-next{
    margin-left: 10px;
}
.tool-wrap-break{
    word-break:break-all;
}
.tool-inline-error{
    color: dome-color(dome,error);
    margin-left: 10px;
}
// no wrap (eg:there is text with class '.tool-nowrap'...)
.tool-nowrap{
    @extend %nowrap;
}
// text align input
.tool-align-input{
    padding-top: 6px;
}
.tool-not-align-input{
    padding-top:0px !important;
}
.tool-enable-click:hover{
    cursor: pointer;
}
.tool-item-next{
    margin-left: 10px;
}
.full{
    width: 100%;
}
.popover.top{
    word-wrap:break-word;
}
// checkbox/radio's parent container
.com-check-con{
    margin-right: 40px;
}
// btn group
.com-btn-group{
    overflow: hidden;
    .ui-btn,.ui-input{
        float: left;
        border-radius: 0;
        &:first-child{
            border-radius: $default-radius 0 0 $default-radius;
        }
        &:last-child{
            border-radius: 0 $default-radius $default-radius 0;
        }
        &:not(:last-child){
            border-right: 0;
        }
    }
    .ui-btn{
        height: 34px;
    }
}
// list like tabset
.com-tabset-scroll{
    position: relative;
    display: inline-block;
    margin-right: 10px;
    height: 42px;
    font-size: 14px;
    max-width: 0;
    overflow: hidden;
    .list-back{
        width: 10000px;
    }
}
ul.com-list-tab{
    padding: 23px 0 0 $wider-padding;
    border-bottom: $light-border;
    li{
        display: inline-block;
        margin-right: 34px;
        border-bottom: 2px solid transparent;
        &:last-child{
            margin-right: 0;
        }
        &.active{
            a{
                color:dome-color(dome,primary);
            }
        }
        &.txt-error{
            color:dome-color(dome,error);
        }
        &.active,&:hover{
            cursor: pointer;
            border-bottom: 2px solid dome-color(dome,primary);
        }
        &.nav-option{
            position: absolute;
            right: 0;
            top: 0;
            width: 48px;
            height: 42px;
            margin-right: 0;
            padding-top: 24px;
            background-color: #fff;
            .icon-next{
                margin-left: 8px;
            }
            &:hover{
                border-bottom: none;
            }
        }
        a.link-list{
            display: inline-block;
            padding-bottom: 20px;
            &:focus{
                text-decoration: none;
            }
        }
    }
}
// bottom div include button
.com-bottom-option{
    padding-top: 50px;
    padding-bottom: 30px;
    text-align: center;
    // container of buttons with error info
    .com-bottom-option-con{
        position: relative;
        display: inline-block;
        .txt-error{
            position: absolute;
            left: 100%;
            top:8px;
            width: 230px;
            padding-left: 12px;
            text-align: left;
        }
    }
}
// chose registry
.com-chose-repository{
    padding-top: 22px;
    .repository{
        display: inline-block;
        width: 160px;
        height: 60px;
        margin-right: 66px;
        line-height: 60px;
        font-weight: bold;
        text-align: center;
        vertical-align: middle;
        border-radius: $default-radius;
        border:2px solid transparent;
        background-color: dome-color(background,light);
        &:hover{
            cursor: pointer;
            border-color:dome-color(dome,primary);
        }
        i{
            margin-right: 6px;
        }
        .icon-gitlab{
            @include  get-sprite($lib-icons,gitlab,true);
        }
        .icon-github{
            @include  get-sprite($lib-icons,github,true);
        }
        &.active{
            border-color:dome-color(dome,primary);
            background-color: #fff;
        }
    }
}
// page no
.com-page-list{
    text-align: right;
    padding: 12px $page-padding 12px 0;
    .pageno{
        display: inline-block;
        margin-left: 6px;
        margin-right: 6px;
        &:hover{
            cursor: pointer;
        }
        &.on{
            font-weight: bold;
            color: dome-color(dome,primary);
        }
    }
    .page-info{
        margin-right: 10px;
    }
}
// style like label
.com-label-list{
    li{
        float: left;
        margin-right: 16px;
        margin-bottom: 18px;
        .label-item{
            display: inline-block;
            padding: 4px 8px 4px 8px;
            background-color: dome-color(background,light);
            border-radius: $default-radius;
            .icon-cancel{
                margin-right: 4px;
            }
        }
    }
}
.com-list-table{
    li.head{
        background-color: dome-color(background,light);
    }
    li{
        padding: 10px 12px 10px 15px;
        border-bottom: $light-border;
        &:last-child{
            border-bottom: none;
        }
        &:hover .ui-table-link{
            color: dome-color(dome,bright);
        }
    }
}
.nav-tabs{
    border-bottom: $light-border;
    padding-left: 16px;
    li{
        margin-bottom: 0;
        padding: 0 27px 0 27px;
        &>a{
            border:none;
            margin-right: 0px;
            text-align: center;
            border:none;
            border-radius: 0;
            padding: 22px 5px 20px 5px;
            &:hover,&:focus{
                background: none;
                color: dome-color(font,default);
            }
        }
        &.active>a,&.active>a:hover,&.active>a:focus{
            border:none;
            border-radius: 0;
        }
        &:not(.nav-option){
            &.active>a,&.active>a:hover,&.active>a:focus{
                border-bottom: 2px solid dome-color(dome,primary);
                color:dome-color(dome,primary);
            }
        }
    }
}

.tool-noinfo{
    padding: 30px 0;
}



/* dome custom input */
input.ui-radio,
input.ui-check{
    display:none;
    cursor:pointer;
    vertical-align: middle;
    &:focus,
    &:active{
        outline:none;
    }
    & + label{
        cursor:pointer;
        display:inline-block;
        vertical-align: middle;
        position: relative;
        padding-left:25px;
        font-weight: 400;
        margin-right:10px;
        &:before,
        &:after{
            content:" ";
            font-family: helvetica;
            display:inline-block;
            width:18px;
            height:18px;
            left:0;
            bottom:1px;
            text-align:center;
            position: absolute;
        }
        &:before{
            border: 1px solid #babec8;
            background-color:#fff;
            @include box-shadow(inset 0 0 0 0px dome-color(dome,active));
            @include transition(all .3s ease-in-out);
        }
        &:after{
            color:#fff;
        }
        &:empty{
            &:before,
            &:after{
                bottom:-10px;
            }
        }
    }
    &.size16+label{
        &:before,
        &:after{
            bottom: 3px;
        }
        &:empty{
            &:before,
            &:after{
                bottom:-7px;
            }
        }
    }
    &:checked + label{
        color: dome-color(dome,active);
    }
    &:checked + label:before{
        border: none;
        @include box-shadow(inset 0 0 0 10px dome-color(dome,active));
    }
}

/*Radio Specific styles*/
input.ui-radio{
    & + label:before{
        @include border-radius(50%);
    }
    & + label:hover:after,
    &:checked + label:after{
        content:'\2022';
        position:absolute;
        top:2px;
        left: 0;
        font-size:18px;
        line-height:17px;
    }
    & + label:empty:hover:after,
    &:checked + label:empty:after{
        top:-10px;
        left: -0.5px;
    }
    & + label:hover:after{
        color:darken(#fff, 20%);
    }
    &:checked + label:after,
    &:checked + label:hover:after{
        top: 2px;
        color:#fff;
    }
}


/*Checkbox Specific styles*/
input.ui-check{
    & + label:before{
        @include border-radius(3px);
    }
    & + label:after{
        content:"\2713";
        color:#E5EDF5;
        line-height:18px;
        font-size:14px;
    }
    & + label:hover:after{
        color:#9BAFC9;
        @include transition(.3s)
    }
    &:checked + label:after,
    &:checked + label:hover:after{
        color: #fff;
    }
}


.ui-toggle{
    display:inline-block;
    width:51px;
    height:24px;
    margin-top: 3px;
    margin-right: 8px;
    border:none;
    box-shadow: none;
    background-color:#ccc;
    position: relative;
    @include border-radius(30px);
    @inlcude box-shadow(none);
    @include transition(all .2s ease-in-out);
    vertical-align: bottom;
    &:after{
        content:'';
        display:inline-block;
        position:absolute;
        width:20px;
        height:20px;
        background-color:#fff;
        top:2px;
        left:2px;
        @include border-radius(50%);
        @include transition(all .2s ease-in-out);
    }
    &.on{
        @include box-shadow(inset 0 0 0 12px dome-color(dome,active));
        &:after{
            left:29px;
            background-color:#fff;
        }
    }
}
